import React, { Component } from "react";
import {
  Space,
  Table,
  Button,
  Row,
  Col,
  Popconfirm,
  message,
  Drawer,
  Tag,
} from "antd";
import UserFrom from "./components/user-from";
import { userLook } from "../../api/user";
import { connect } from "react-redux";
import { userDel } from "../../api/user";
class User extends Component {
  state = {
    modalOpen: false,
    userList: [],
    userInfo: null,
    changesData: [],
  };
  componentDidMount = () => {
    userLook().then((res) => {
      this.setState({
        userList: res.data.results,
      });
    });
  };
  columns = [
    {
      title: "账号id",
      dataIndex: "objectId",
      key: "objectId",
    },
    {
      title: "用户名称",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "用户头像",
      dataIndex: "img",
      key: "img",
    },
    {
      title: "用户角色",
      dataIndex: "role",
      key: "role",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            onClick={() => {
              this.showModal(true, record);
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确认要删除这条数据吗？"
            onConfirm={() => {
              this.handleDel(record);
            }}
            onCancel={this.cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button type="primary" danger size="small">
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  handleDel = (userInfo) => {
    const { userList } = this.state;
    const { objectId } = userInfo;
    console.log(userInfo);
    // userDel(objectId, sessionToken).then((_) => {
    //   let arr = userList.filter((item) => item.objectId != id);
    //   this.setState({
    //     userList: arr,
    //   });
    // });
    message.success("删除成功");
  };
  cancel = () => {
    message.error("取消操作");
  };
  showModal = (bool, uasrInfo) => {
    this.setState({
      modalOpen: bool,
      userInfo: uasrInfo,
    });
  };
  handleFinish = (bool) => {
    this.setState({
      modalOpen: bool,
    });
  };
  handleFrom = (bool, id, userInfo) => {
    const { userList } = this.state;
    const leng = userList.length;
    for (let i = 0; i < leng; i++) {
      if (userList[i].objectId == id) {
        userList[i] = { objectId: id, ...userInfo };
        this.setState({
          modalOpen: bool,
          userList: [...userList],
        });
      } else {
        this.setState({
          modalOpen: bool,
          userList: [...userList, { objectId: id, ...userInfo }],
        });
      }
    }
  };
  handleChanges = (changes) => {
    this.setState({
      changesData: changes,
    });
  };
  render() {
    const { modalOpen, userInfo, changesData } = this.state;
    return (
      <div>
        <Row justify="start">
          <Col span={6}>
            <Button
              type="primary"
              onClick={() => {
                this.showModal(true, null);
              }}
            >
              添加用户
            </Button>
          </Col>
        </Row>
        <Drawer
          title={userInfo ? "编辑用户" : "新增用户"}
          placement="right"
          onClose={() => {
            this.handleFinish(false);
          }}
          open={modalOpen}
        >
          {modalOpen ? (
            <UserFrom
              userInfo={userInfo}
              handleFrom={this.handleFrom}
            ></UserFrom>
          ) : (
            ""
          )}
        </Drawer>
        <Table
          columns={this.columns}
          dataSource={this.state.userList}
          rowKey="objectId"
        />
      </div>
    );
  }
}

export default connect()(User);
